<!-- 发票列表 -->

<template>
  <div class="client-list">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <a-space class="client-list-header">
      <a-input-search
        :style="{ width: '320px' }"
        placeholder="请输入订单编号"
        search-button
      />
      <div>
        <a-button>
          <template #icon>
            <icon-download />
          </template>
          <template #default>导入</template>
        </a-button>

        <a-button>
          <template #icon>
            <icon-export rotate="-90" />
          </template>
          <template #default>导出</template>
        </a-button>

        <a-button>批量操作</a-button>
        <a-button>释放</a-button>
        <a-button @click="showFormHeaderSetting">表头设置</a-button>
      </div>
    </a-space>
    <tableTurn :tableData="getClientListData">
      <template>
        <a-table-column title="序号"></a-table-column>

        <a-table-column
          :title="item.name"
          v-for="(item, index) in selectedHeader"
          :key="index"
        ></a-table-column>
        <a-table-column fixed="right" title="操作" data-index="salary">
          <template #cell="{}">
            <a-button type="text">详情</a-button>
            <a-button type="text">级别调整</a-button>
            <a-button type="text">锁定</a-button>
            <a-button type="text">转黑名单</a-button>
            <a-button type="text">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </tableTurn>

    <FormHeaderSetting
      v-model:visible="formHeaderSettingVisible"
      title="发票列表表头设置"
      :resultList="headerSetting.list"
      @headerSave="headerSave"
    ></FormHeaderSetting>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { pageData as IpageData } from '@/types/global';
  import {
    GetClientHeader,
    PutClientHeader,
  } from '@/api/order-management/client-management/client-list';
  import * as apilist from '@/api/order-management/client-order/index';
  import { formHeaderSetting } from '@/types/global';

  const router = useRouter();
  const title = '发票列表';
  const breadCrumb = ['订单管理', '回款管理', '发票列表'];

  const headerSetting = reactive<formHeaderSetting>({
    list: [],
  });

  // 获取发票列表数据
  const getClientListData = async (page: any) => {
    const res = await apilist.GetClientOrder({ ...page });
    return Promise.resolve(res);
  };

  const getHeaders = async () => {
    try {
      const res = await GetClientHeader();
      headerSetting.list = res.extend;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getHeaders();

  // 在表格上显示的表头
  const selectedHeader = computed(() => {
    const arr: formHeaderSetting['list'] = [];
    headerSetting.list.forEach((item) => {
      if (item.isDefault === 1) {
        arr.push(item);
      }
    });
    return arr;
  });
  // 储存发票信息
  const clientList = reactive([]);

  let formHeaderSettingVisible = ref<boolean>(false); // 是否显示表头设置组件

  // 表头设置按钮
  const showFormHeaderSetting = () => {
    formHeaderSettingVisible.value = true;
  };

  // 表头设置保存后返回的自定义事件
  const headerSave = async (headerList: formHeaderSetting['list']) => {
    try {
      const data = {
        use: headerList,
      };
      await PutClientHeader(data);
      headerSetting.list = [...headerList];
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .client-list {
    :deep(.arco-space) {
      justify-content: space-between;
    }
    :deep(.arco-space-horizontal .arco-space-item) {
      margin-left: 50px;
    }
    &-header {
      width: 100%;
      margin-bottom: 10px;
      margin-top: 5px;
      :deep(.arco-btn-secondary) {
        color: #165dff;
        margin-right: 20px;
      }
    }
  }
</style>
